<template>
    <div class="dooya-container" style="min-width: 1150px;overflow:scroll;">

        <Card>
            <!-- 操作 -->
            <div style="height:40px;margin-bottom: 0px; display:flex;justify-content:end; ">
                <Button style="height:30px;" type="primary" icon="ios-add" to="/inneruser/inneruseredit">新增</Button>

                <Button v-if="anim1" @click="anim1 = !anim1" style="margin-left: 10px;height:30px;" type="success" icon="ios-arrow-dropup">隐藏</Button>
                <Button v-else  @click="anim1 = !anim1" style="margin-left: 10px;height:30px;" type="success" icon="ios-arrow-dropdown">展开</Button>
            </div>

            <hr>
            <transition name="fade">
                <div v-show="anim1" >
                    <template>
                        <Form    ref="formItemSearch" :model="searchData"  :rules="searchDataRule" :label-width="120" inline  style="margin-top: 20px;" class="form-user">

                            <FormItem class="custom-label" label="请输入关键字：" style="min-width: 320px;font-size: 14px;" prop="keywords">
                                <Input v-model="searchData.keywords" placeholder="请输入用户名/真实姓名/移动电话"></Input>
                            </FormItem>
                            <FormItem label="请选择性别：" style="min-width: 260px;" prop="sex">
                                <Select v-model="searchData.sex" >
                                    <Option value="" key="sex0">全部</Option>
                                    <Option value="1" key="sex1" >男</Option>
                                    <Option value="2" key="sex2" >女</Option>
                                    <Option value="3" key="sex3" >未知</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="请选择状态：" style="min-width: 260px;" prop="status">
                                <Select v-model="searchData.status" >
                                    <Option value="" key="s">全部</Option>
                                    <Option value="1" key="s1">启用</Option>
                                    <Option value="2" key="s2">禁用</Option>
                                </Select>
                            </FormItem>
                            <br/>
                            <Row>
                                <Col span="22" offset="0"  style="height: 50px; display:flex;justify-content:center;align-items:center;">
                                    <FormItem>
                                        <Button type="primary" icon="ios-search"  @click="handleSubmit('formItemSearch')">查询</Button>
                                        <Button icon="ios-trash-outline"   @click="handleReset('formItemSearch')" style="margin-left: 8px">清除</Button>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </template>
                </div>
             </transition>
            <!-- 表格 -->
            <Table border stripe :data="tableData" :loading="tableLoading" :columns="tableColumns"  style="margin-top: 20px;">
            </Table>

            <!-- 分页 -->
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page show-sizer transfer placement="top" :total="tableDataOrg.length" :current.sync="pageNum"
                        :page-size-opts="[10, 50, 100, 200]" :page-size="pageSize" @on-change="changePage"
                        @on-page-size-change="changePageSize"></Page>
                </div>
            </div>
        </Card>


    </div>
</template>

<script>
import { toolTip } from "@/libs/util";
import {
    getValueByKey, // 根据对象数组某个key的value，查询另一个key的value
    resultCallback // 根据请求的status执行回调函数
} from "@/libs/dataHanding";
// api
import {
    editStatus, //启用，禁用
    delUser, //删除用户
    getUserList, // 获取用户列表
    getGroupList // 获取角色列表
} from "@/api/data";

export default {
    data() {
        return {
            anim1: true,
            searchData: {
                keywords: "",
                sex: "",
                status: ""
            },
            /* 全局 */
            roleList: [], // 角色列表 - select用
            /* table */
            tableDataOrg: [], // 原始数据
            tableData: [], // 处理后的当页数据
            tableColumns: [
                {
                    title: "序号",
                    key: "id",
                    align: "center",
                    minWidth: 40
                },
                {
                    title: "用户名",
                    key: "username",
                    align: "center",
                    minWidth: 80
                },
                {
                    title: "真实姓名",
                    key: "real_name",
                    align: "center",
                    minWidth: 90
                },
                {
                    title: "移动电话",
                    key: "telphone",
                    align: "center",
                    minWidth: 90
                },
                {
                    title: "mail",
                    key: "email",
                    align: "center",
                    minWidth: 90
                },
                {
                    title: "性别",
                    key: "status",
                    minWidth: 40,
                    align: "center",
                    render: (h, params) => {
                        let texts = "";
                        let color = "#1E90FF";
                        if (params.row.sex == "1") {
                            texts = "男";
                            color = "#1E90FF";
                        } else if (params.row.sex == "2") {
                            texts = "女";
                            color = "#FF1493";
                        } else {
                            texts = "未知";
                            color = "#483D8B";
                        }
                        return h(
                            "div",
                            {
                                props: {
                                    type: "text",
                                    size: "small"
                                },
                                style: {
                                    color: color
                                }
                            },
                            texts
                        );
                    }
                },
                {
                    title: "状态",
                    key: "status",
                    width: 80,
                    align: "center",
                    render: (h, params) => {
                        let texts = "";
                        if (params.row.status == "1") {
                            texts = "启用";
                        } else {
                            texts = "禁用";
                        }
                        return h(
                            "div",
                            {
                                props: {
                                    type: "text",
                                    size: "small"
                                },
                                style: {
                                    color:
                                        params.row.status == "1"
                                            ? "#1E90FF"
                                            : "#DC143C"
                                }
                            },
                            texts
                        );
                    }
                },
                {
                    title: "用户组",
                    key: "role_name",
                    align: "center",
                    ellipsis: true, //超出长度时用...显示
                    width: 150,
                    render: (h, params) => {
                        return toolTip(h, 1, params.row.role_name);
                    }
                },
                {
                    title: "操作",
                    key: "action",
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let status_button;
                        if (params.row.status == 1) {
                            status_button = h(
                                "Button",
                                {
                                    props: {
                                        type: "text",
                                        size: "small"
                                    },
                                    style: {
                                        color: "#DC143C",
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            //1:启用，2：禁用
                                            this.editUserStatus(
                                                params.row.id,
                                                2
                                            );
                                        }
                                    }
                                },
                                "禁用"
                            );
                        } else {
                            //启用
                            status_button = h(
                                "Button",
                                {
                                    props: {
                                        type: "text",
                                        size: "small"
                                    },
                                    style: {
                                        color: "#1E90FF",
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            //1:启用，2：禁用
                                            this.editUserStatus(
                                                params.row.id,
                                                1
                                            );
                                        }
                                    }
                                },
                                "启用"
                            );
                        }

                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "text",
                                        size: "small"
                                    },
                                    style: {
                                        color: "#1E90FF",
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row);
                                        }
                                    }
                                },
                                "编辑"
                            ),
                            status_button,
                            h(
                                "Tooltip",
                                {
                                    props: {
                                        trigger: "hover",
                                        content: "删除",
                                        placement: "top",
                                        transfer: true
                                    }
                                },
                                [
                                    h("Button", {
                                        props: {
                                            type: "error",
                                            size: "small",
                                            icon: "md-close",
                                            disabled:
                                                params.row.name === "admin"
                                        },
                                        on: {
                                            click: () => {
                                                this.del(params.row);
                                            }
                                        }
                                    })
                                ]
                            )
                        ]);
                    }
                }
                //
            ], // 表头列项
            total: 0, // 总数
            pageNum: 1, // 页码
            pageSize: 10, // 每页显示数量
            /* loading */
            tableLoading: false, // table
            buttonLoading: false, // button
            /* modal */
            modalShow: false, // 是否显示
            modalDataType: "", // 类型 - insert or edit
            modalData: {
                name: "",
                displayName: "",
                phone: "",
                access: []
            }, // 数据
            modalDataOrg: {}, // 数据 - 行内原始
            searchDataRule: {
                keywords: [
                    {
                        type: "string",
                        max: 40,
                        message: "菜单名称过长",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    async created() {
        this.getData();
        this.roleList = (await getGroupList()).data.data || []; // 角色列表下拉select框
    },

  
    methods: {
        edit(row) {
            console.log("edit-row:", row);
            this.$router.push({
                name: "inneruseredit",
                params: row
            });
        },
        // 获取首页数据
        async getData() {
            this.tableLoading = true;
            let paramData = {
                keywords: this.searchData.keywords,
                status: this.searchData.status,
                sex: this.searchData.sex,
                page: this.pageNum,
                length: this.pageSize
            };
            console.log("paramData:", paramData);

            this.tableData = (await getUserList(paramData)).data.data || [];
            console.log("tableData:", this.tableData);
            //this.refreshData();
            this.buttonLoading = false;
            this.tableLoading = false;
        },
        // 根据条件刷新数据
        refreshData() {
            // 分页 & 每页条数
            this.tableData = this.tableDataOrg.slice(
                (this.pageNum - 1) * this.pageSize,
                this.pageNum * this.pageSize
            );
            // 如果是在删除之后获取的数据 -> 若删掉的是某一页的最后项且页码不是1，则自动获取前一页的数据
            if (this.tableData.length === 0 && this.tableDataOrg.length !== 0) {
                this.pageNum--;
                this.getData();
            }
        },
        // 分页
        changePage(pageNum) {
            this.pageNum = pageNum;
            this.getData();
        },
        // 每页条数变化
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.pageNum = 1;
            this.getData();
        },

        // 点击表单按钮 - 查询
        handleSubmit() {
            this.$refs.formItemSearch.validate(async valid => {
                if (valid) {
                    this.getData();
                }
            });
        },
        // 点击按钮 - 删除
        del(row) {
            this.$Modal.confirm({
                title: "删除后不能恢复，确定删除该用户？",
                onOk: async () => {
                    //请求后端数据
                    let data = {};
                    data.id = row.id;
                    let res = await delUser(data);

                    if (res.data.code != 0) {
                        //axios.js 已经截取了错误信息，这里不需要提示了。
                    } else {
                        resultCallback(200, "修改成功！", () => {
                            this.getData();
                        });
                    }
                },
                closable: true
            });
        },
        editUserStatus(id, status) {
            //请求后端数据
            let editStatusData = { id: id, status: status };

            return new Promise((resolve, reject) => {
                editStatus(editStatusData)
                    .then(res => {
                        //返回提示：
                        const msg = res.data.msg;
                        const code = res.data.code;

                        console.log(res);

                        resolve(res);

                        if (code == 0) {
                            resultCallback(200, msg, () => {
                                this.getData();
                            });
                        } else {
                            resultCallback(201, msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dooya-container /deep/ {
    .ivu-table-body {
        overflow: hidden;
    }
    .ivu-table {
        th {
            text-align: center;
            height: 60px;
            background-color: #f6f6f8;
            color: #1f2d3d;
        }
    }
}
</style>
